<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
	<link rel="stylesheet" href="../../css/win.css">
</head>
<body>
<div class="jb_shopping_top" >
	   <div class="jb_shopping_topa">
	      <div class="jb_shopping_topb">
	    hi,欢迎您的到来！
		<a href="../登录.html">登录</a> |
		<a href="">注册</a> |
		<a href="../会员中心主页.html" >会员中心</a> |
		<a href="">客服服务</a>
		   </div>
		</div>
	</div>
	<div class="jb_shopping_logo">
			<img src="../../images/order_a.jpg" height="82" width="83" alt="">
	</div>
<div class="zq_zhuce1_max">
	<div class="zq_zhuce1_center">
		<div class="zq_zhuce1_center1">
			<div class="zq_zhuce1_center1_top">
				<span>注册</span>
			</div>
			<div class="zq_zhuce1_nei1">
				<div class="zq_zhuce1_nei1_top clear">
					<div class="zq_zhuce1_nei1_top1" id="zq_zhuce1_nei1_top1">
						<img src="../../images/zq_1.jpg" alt=""/>
						<span id="zq_emali">邮箱注册</span>
					</div>
					<div class="zq_zhuce1_nei1_top3"></div>
					<div class="zq_zhuce1_nei1_top2" id="zq_zhuce1_nei1_top2">
						<img src="../../images/zq_11.jpg" alt=""/>
						<span id="zq_phone">手机注册</span>
					</div>
					<div>
						<ul></ul>
						<ul></ul>
					</div>
					<div class="zq_zhuce1_nei1_mali_1"id="zq_zhuce1_nei1_mali_1">
						<div class="zq_zhuce1_nei1_mali1">
							<ul>
								<li>
									<span >邮箱：</span>
									<input type="text" name="zq_input" value="请输入邮箱地址">
								</li>
								<li>
									<span>设置密码：</span>
									<input type="text" name="zq_input" value="6-20个大小写英文字母、符号或数字">
								</li>
								<li>
									<span>确认密码：</span>
									<input type="text" name="zq_input" value="请再次输入密码">
								</li>
							</ul>
						</div>
						<div class="zq_zhuce1_nei1_mali2 clear">
							<div class="zq_zhuce1_nei1_mali2_yan1">
								<span>验证码：</span><input id="content" type="text">
							</div>
							<div class="zq_zhuce1_nei1_mali2_yan2" id="a"></div>
							<div class="zq_zhuce1_nei1_mali2_yan3" id="b">
								<span>看不清</span><br/>
								<span>换一张</span>
							</div>
						</div>	
						<div class="zq_zhuce1_nei1_mali3">
							<input type="checkbox" id="zq_checkbox">
							<span>我已阅读并同意</span>
							<a href="">《商城用户协议》</a>
						</div>
						
						<input class="zq_zhuce1_nei1_mali4" id="agree" type="submit" value="同意协议并注册">
					</div>
				
					<div class="zq_zhuce1_nei1_mali_2" id="zq_zhuce1_nei1_mali_2">
						<div class="zq_zhuce1_nei1_mali_2_1">
							<span>手机号:</span>
							<input type="text" value="请输入手机号">
						</div>
						<div class="clear">
							<div class="zq_zhuce1_nei1_mali_2_2">
								<span>验证码:</span>
								<input type="text" value="6位验证码">
							</div>
							<input class="zq_zhuce1_nei1_mali_2_3" type="button" value="获取验证码">
						</div>
						<div class="zq_zhuce1_nei1_mali_2_4">
							<ul>
								<li>
									<span>设置密码:</span>
									<input type="text" value="6-20个大小写英文字母、符号或数字">
								</li>
								<li>
									<span>确认密码：</span>
									<input type="text" value="请再次输入密码">
								</li>
							</ul>
						</div>
						<div class="zq_zhuce1_nei1_mali3">
							<input type="checkbox">
							<span>我已阅读并同意</span>
							<a href="">《商城用户协议》</a>
						</div>
						<input class="zq_zhuce1_nei1_mali4"  type="submit" value="同意协议并注册">
					</div>
				</div>
			</div>
			
			<div class="zq_zhuce1_nei2">
				<div class="zq_zhuce1_nei2_top1">已有商城账号？</div>
				<div class="zq_zhuce1_nei2_top2">
					<span>请直接</span>
					<input type="button" onclick="logbtn()" value="登录">
				</div>	
				<div class="zq_zhuce1_nei2_center">
					<span>-------------------</span>
					使用合作网站账户登录
					<span>-------------------</span>
				</div>	
				<div class="zq_zhuce1_nei2_center1">
					<img src="../../images/zq_3.jpg" alt="">
					<img src="../../images/zq_4.jpg" alt="">
					<img src="../../images/zq_5.jpg" alt="">
					<img src="../../images/zq_6.jpg" alt="">
					<img src="../../images/zq_7.jpg" alt="">
					<img src="../../images/zq_8.jpg" alt="">
				</div>
				<div class="zq_zhuce1_nei2_btm">
					<img src="../../images/zq_2.jpg" alt="">
				</div>
			</div>
		</div>
	</div>
</div>
<div>
		<iframe class="xst_foot" src="../分页/版权商标.html" frameborder="0"></iframe>
	</div>
	<script>
	
		var zqEmailDiv = document.getElementById("zq_zhuce1_nei1_mali_1");
		var zqPhoneDiv = document.getElementById("zq_zhuce1_nei1_mali_2"); 
		var oBtnEmail = document.getElementById("zq_emali");
		var oBtnPhone = document.getElementById("zq_phone");
		var top1 = document.getElementById("zq_zhuce1_nei1_top1");
		var top2 = document.getElementById("zq_zhuce1_nei1_top2");
		var oZq_check = document.getElementById("zq_checkbox");
		var flag = true;
		var oZq_input = document.getElementsByName("zq_input");
		var str = "请输入邮箱地址";

		for(var j = 0;j<oZq_input.length;j++){
			(function(j){
				oZq_input[j].onfocus = function(){
					if(oZq_input[j].value){
						oZq_input[j].value="";
						oZq_input[j].style.color="#000";
						if(j==1||j==2){
							oZq_input[j].type="password";
						}
					}
				}
				oZq_input[j].onblur = function(){
					if(!oZq_input[j].value){
						oZq_input[j].value="请输入邮箱地址";
						oZq_input[j].style.color="#ccc";
					}
				}
			})(j);
		}
		oZq_check.onclick = function(){
			if(flag){
				oBtn.style.backgroundColor="#d50f1f";
				flag=false;
			}else{
				oBtn.style.backgroundColor="#aeaeae";
				flag=true;
			}	

		}
		oBtnPhone.onclick = function(){
			top1.style.color="#eee"
			top2.style.color="#000";
			zqEmailDiv.style.display="none";
			zqPhoneDiv.style.display="block";
		}
		oBtnEmail.onclick = function(){
			top2.style.color="#eee"
			top1.style.color="#000"
			zqPhoneDiv.style.display="none";
			zqEmailDiv.style.display="block";
		}
		var oSpan = document.getElementById("a");
		var oIput = document.getElementById("b");
		var oBtn = document.getElementById("agree");
		function createCode(len){
			var seed = new Array(
					'abcdefghijklmnopqrstuvwxyz',
					'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
					'0123456789'
				);
			var idx,i;
			var result = "";
			for(i=0;i<len;i++){
				idx = Math.floor(Math.random()*3);
				result += seed[idx].substr(Math.floor(Math.random()*(seed[idx].length)),1);
			}
			return result;
		}
		var oIput1 = document.getElementById("content");
		function tes(){
			var autoStr = oSpan.innerHTML.toUpperCase();
			var inputStr = oIput1.value.toUpperCase();
			if(autoStr==inputStr){
				window.location="注册成功.html"
			}else{
				alert("验证码错误");
				window.location="注册.html"
			}
		}
		oSpan.innerHTML = createCode(4);
		oIput.onclick = function (){
			oSpan.innerHTML = createCode(4);
		}
		oBtn.onclick = function(){
			if(!flag){
				tes();
			}
			
		}
		function logbtn(){
			window.location="../登录.html"
		}
		

	</script>
</body>
</html>